<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻书特效</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/><!--CSS RESET-->
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>

<div class="scene">
    <article class="book">
        <section class="page active">
            <div class="front">
                <header class="htmleaf-header">
                    <h1>翻书特效<span>A good beginning is worth recording</span></h1>
                </header>
                <h1>翻书特效</h1>

                <p>
                    <img style="float: right;" src="image/女帝.jpg"/>
                    总有一天，你会明白，你的委屈要自己消化，你的故事不用逢人就讲起，真正理解你的没有几个，大多人只会站在他们自己的立场，偷看你的笑话，你能做的就是，把委屈藏起来，然后一步一步变得越来越强大。</p>
                <p>
                    努力的意义是为了看到更大的世界，是为了可以有自由选择人生的机会，是为了以后可以不向讨厌的人低头。是为了能够在自己喜欢的人出现的时候，不至于自卑得抬不起头，可以理直气壮地说出那句话：我知道你很好，但是我也不差。
                </p>

            </div>
            <div class="back">
                <h1>– 1 –</h1>
                <p>
                    你应该有自己的梦想，自己的目标，自己的生活，你走在对的道路上，自然会遇到对的人，他们或许陪你一段路，或者与你共度一生，你没办法奢求天长地久，但你至少可以保证，每个你遇见的爱上的人，都是正确的人，给你正能量，给你快乐和欣喜，给你美好的回忆。
                </p>
                <p>
                    多岁的你，肯定会因为某些困难，偷偷掉过很多次眼泪。但时间长了你会发现，挫折面前，你的妥协和脆弱，不会带来任何改变。与其自怨自艾，不如用拼搏和汗水，来一场漂亮的反击。
                </p>
            </div>
        </section>
        <section class="page">
            <div class="front">
                <h1>– 2 –</h1>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
                <p>
                    任何事情，总有答案，与其烦恼，不如顺其自然，或许现在的你还在为某些事而苦闷，敞开心扉，一步一步坚定的向前走，你会发现，希望一直在你的前方张开双臂等待着你。
                </p>
            </div>
            <div class="back">
                <h1>– 3 –</h1>
                <p>
                    人生的奔跑，不在于瞬间的爆发，取决于途中的坚持，你纵有千百个理由放弃，也要找一个理由坚持下去，能激励你，温暖你，感动你的，不是鸡汤，而是身边比你优秀的人比你还努力。
                </p>
                <p>
                    人生的奔跑，不在于瞬间的爆发，取决于途中的坚持，你纵有千百个理由放弃，也要找一个理由坚持下去，能激励你，温暖你，感动你的，不是鸡汤，而是身边比你优秀的人比你还努力。
                </p>
            </div>
        </section>
        <section class="page">
            <div class="front">
                <h1>– 4 –</h1>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
            </div>
            <div class="back">
                <h1>– 5 –</h1>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
            </div>
        </section>
        <section class="page">
            <div class="front">
                <h1>– 6 –</h1>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
            </div>
            <div class="back">
                <h1>– 7 –</h1>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
                <p>
                    也许现在的你很累，但未来的路还很长，不要忘了当初为何而出发，是什么让你坚持到现在，真正优秀的人不会输给自己，勿忘初心，有些事只要你一直在做，就会有希望，就算失败也不留遗憾，把委屈和泪水都咽下去，输不起就不要输，死不了就站起来，告诉所有看不起你的人：我很好。
                </p>
            </div>
        </section>
        <section class="page">
            <div class="front">
                <h1>– 8 –</h1>
                <p>
                    每个人的光芒都不会停歇，自己大胆往前走就好，什么事都可能会有一个新的开始，生命中越珍贵的东西越爱迟到。但只要是属于你的，就一定会讲情义：虽然来晚了，可是来了就不走了。过自已喜欢过的日子，就是最好的日子；只是活自己喜欢的活法，就是最好的活法。
                </p>
                <p>
                    每个人的光芒都不会停歇，自己大胆往前走就好，什么事都可能会有一个新的开始，生命中越珍贵的东西越爱迟到。但只要是属于你的，就一定会讲情义：虽然来晚了，可是来了就不走了。过自已喜欢过的日子，就是最好的日子；只是活自己喜欢的活法，就是最好的活法。
                </p>
            </div>
            <div class="back">
                <h1>– 9 –</h1>
                <p>
                    别为了那些不属于你的观众，去演绎不擅长的人生。别人怎么看你，其实和你毫无关系，也不重要。你要怎么活，也和别人毫无关系，任何人也无权干涉。活自己的人生，走自己的路，路在脚下。
                </p>
                <p>
                    别为了那些不属于你的观众，去演绎不擅长的人生。别人怎么看你，其实和你毫无关系，也不重要。你要怎么活，也和别人毫无关系，任何人也无权干涉。活自己的人生，走自己的路，路在脚下。
                </p>
            </div>
        </section>
    </article>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
    var currentPage = 0;

    $('.book').on('click', '.active', nextPage).on('click', '.flipped', prevPage);
    $('.book').hammer().on("swipeleft", nextPage);
    $('.book').hammer().on("swiperight", prevPage);

    function prevPage() {
        $('.flipped')
            .last()
            .removeClass('flipped')
            .addClass('active')
            .siblings('.page')
            .removeClass('active');
    }

    function nextPage() {

        $('.active')
            .removeClass('active')
            .addClass('flipped')
            .next('.page')
            .addClass('active')
            .siblings();
    }
</script>
</body>
</html>